<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!--    引入css 样式-->
    <link rel="stylesheet"  href="/layui/css/layui.css">
    <!--    引入js -->
    <script src="/layui/layui.js"></script>
</head>
<body>
<div>

    <div class="layui-form-item">
        <label class="layui-form-label">搜索条件：</label>
        <div class="layui-input-inline">
            <input type="text" name="msgName" id="msgName" required lay-verify="required" placeholder="请输入主人名" autocomplete="off" class="layui-input">
            <input type="text" name="msgName" id="name"  required lay-verify="required" placeholder="请输入宠物名称" autocomplete="off" class="layui-input">
        </div>
        <div><button class="layui-btn" onclick="loadData()">搜索</button></div>
    </div>
    <div>
        <table id="demo" lay-filter="test"></table>

        <!--    头部工具栏-->
        <script type="text/html" id="toolbarDemo">
            <button type="button" class="layui-btn" onclick="downLoad()">
                <i class="layui-icon">&#xe67c;</i>下载数据
            </button>
        </script>

        <!--    行操作 工具-->
        <script type="text/html" id="toolEventDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>

</div>

<script>
    var table;
    layui.use('table', function(){
        table = layui.table,
            $=layui.$;

        //完成列表的初始化
        table.render({
            elem: '#demo'
            ,id: 'idTest'
            ,url: '/api/project/selectById2.do' //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'
            ,cols: [[ //表头 需要改  跟你的数据接口返回的一样
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', sort: true, fixed: 'left'}
                ,{field: 'msgName', title: '主人名称'}
                ,{field: 'name', title: '宠物名称'}
                ,{field: 'type', title: '宠物类型'}
                ,{field: 'vatiety', title: '宠物品种'}
                ,{field: 'birthday', title: '宠物生日', sort: true}
                ,{field: 'image', title: '宠物靓照',templet: function(d){
                        return "<img style='width: 60px;height: 60px' src='"+d.image+"'/>";
                    }}
                ,{field: 'info', title: '简介'}
                ,{field: 'ctime', title: '创建时间'}
                ,{title: '操作', width: 200, templet: '#toolEventDemo'}
            ]]
        });

        //列表工具类的触发事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    location.href="pAdd.html";
                    break;
                case 'delete':
                    layer.msg('批量删除');
                    break;
            };
        });

        //单元格工具事件
        table.on('tool(test)', function(obj){ // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            //删除 当前行 1条
            if(layEvent === 'del'){
                layer.confirm('确定删除吗？', function(index){
                    //请求后端接口  Ajax
                    $.post("/api/project/del.do","id="+data.id,function (res){
                        if(res.code==0){
                            obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                        }else {
                            layer.msg(obj.data);
                        }
                        layer.close(index);
                    })
                });
            }
            else if(layEvent === 'edit'){ //修改当前行的数据
                //把当前行对应的数据 存储到本地  localStorage.setItem 把对象转换为json,因为只能存储字符串
                localStorage.setItem("pet",JSON.stringify(data));
                location.href="pUpdate.html";
            }
        });
    });
    //实现列表数据的重载
    function loadData(){
        // 重载 - 这里以搜索为例
        table.reload('idTest', {
            where:{
                "msgName":$("#msgName").val(),
                "name":$("#name").val(),
            }
        });
    }
    //数据下载
    function downLoad(){
        //实现数据的下载
        location.href="/api/project/download.do";
    }
</script>
</body>
</html>